$border-radius-sm: 1px;
$border-radius: 2px;
$primary: #E80B26 !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$body-bg: #fff;
$black: #000 !default;
$box-shadow-sm: 0 0 0.025rem 0.025rem rgba($black, 0.075) !default;
$box-shadow: 0 0 0.05rem 0.05rem rgba($black, 0.15) !default;
$box-shadow-lg: 0 0 0.1rem 0.1rem rgba($black, 0.175) !default;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

@mixin button-outline-variant(
    $color,
    $color-hover: color-yiq($color),
    $active-background: $color,
    $active-border: $color
) {
    color: $color;
    border-color: $color;
    background-color: $white;

    @include hover() {
        color: $color-hover;
        background-color: $active-background;
        border-color: $active-border;
    }

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
    }

    &.disabled,
    &:disabled {
        color: $color;
        background-color: transparent;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: color-yiq($active-background);
        background-color: $active-background;
        border-color: $active-border;

        &:focus {
            // Avoid using mixin so we can pass custom focus shadow properly
            @if $enable-shadows and $btn-active-box-shadow != none {
                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5);
            } @else {
                box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
            }
        }
    }
}
